<template>
  <div class="example-container">
    <h2>动态表单表格示例</h2>

    <dynamic-form-table ref="tableRef" v-model="formData" :config="tableConfig" @add="handleAdd" @delete="handleDelete"
      @change="handleChange">
      <!-- 自定义列插槽 -->
      <template #custom-status="{ row, index }">
        <el-switch v-model="row.status" active-text="启用" inactive-text="禁用" />
      </template>

      <!-- 自定义额外列 -->
      <template #extra-columns>
        <el-table-column label="自定义操作" width="150">
          <template #default="{ row, $index }">
            <el-button type="text" size="small" @click="handleCustomAction(row, $index)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </template>

      <!-- 底部操作栏 -->
      <template #footer="{ addRow }">
        <div class="footer-actions">
          <el-button type="primary" @click="addRow">批量添加行</el-button>
          <el-button @click="handleValidate">校验表单</el-button>
          <el-button @click="handleSubmit">提交</el-button>
        </div>
      </template>
    </dynamic-form-table>

    <!-- 数据预览 -->
    <el-card class="data-preview">
      <template #header>数据预览</template>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DynamicFormTable from './DynamicFormTable.vue'
import type { DynamicTableConfig } from '../types/dynamicTable'
import { ElMessage } from 'element-plus'

const tableRef = ref()

// 配置项
const tableConfig: DynamicTableConfig = {
  showOperation: true,
  operationWidth: 120,
  showAddBtn: true,
  showDeleteBtn: true,
  minRows: 1,
  maxRows: 10,
  columns: [
    {
      prop: 'name',
      label: '姓名',
      type: 'input',
      required: true,
      width: 150,
      maxlength: 20,
      showWordLimit: true
    },
    {
      prop: 'age',
      label: '年龄',
      type: 'number',
      required: true,
      width: 120,
      min: 0,
      max: 150
    },
    {
      prop: 'gender',
      label: '性别',
      type: 'select',
      required: true,
      width: 120,
      options: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' }
      ]
    },
    {
      prop: 'department',
      label: '部门',
      type: 'select',
      required: false,
      width: 150,
      multiple: true,
      options: [
        { label: '技术部', value: 'tech' },
        { label: '产品部', value: 'product' },
        { label: '运营部', value: 'operation' }
      ]
    },
    {
      prop: 'entryDate',
      label: '入职日期',
      type: 'date',
      required: true,
      width: 180
    },
    {
      prop: 'updateTime',
      label: '更新时间',
      type: 'datetime',
      width: 200
    },
    {
      prop: 'salary',
      label: '薪资',
      type: 'number',
      required: false,
      width: 150,
      min: 0,
      precision: 2,
      step: 100
    },
    {
      prop: 'remark',
      label: '备注',
      type: 'textarea',
      width: 200,
      maxlength: 100,
      showWordLimit: true
    },
    {
      prop: 'status',
      label: '状态',
      type: 'custom',
      slotName: 'custom-status',
      width: 150
    }
  ]
}

// 表单数据
const formData = ref([
  {
    name: '张三',
    age: 25,
    gender: 'male',
    department: ['tech'],
    entryDate: '2024-01-01',
    updateTime: '',
    salary: 10000,
    remark: '',
    status: true
  }
])

// 事件处理
const handleAdd = (index: number) => {
  console.log('添加行:', index)
}

const handleDelete = (index: number, row: any) => {
  console.log('删除行:', index, row)
}

const handleChange = (data: any[]) => {
  console.log('数据变化:', data)
}

const handleCustomAction = (row: any, index: number) => {
  ElMessage.info(`查看第 ${index + 1} 行详情`)
  console.log(row)
}

const handleValidate = async () => {
  const valid = await tableRef.value.validate()
  if (valid) {
    ElMessage.success('校验通过')
  } else {
    ElMessage.error('校验失败')
  }
}

const handleSubmit = async () => {
  const valid = await tableRef.value.validate()
  if (valid) {
    const data = tableRef.value.getData()
    console.log('提交数据:', data)
    ElMessage.success('提交成功')
  } else {
    ElMessage.error('请先完善表单')
  }
}
</script>

<style scoped>
.example-container {
  padding: 20px;
}

.footer-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.data-preview {
  margin-top: 20px;
}

.data-preview pre {
  max-height: 300px;
  overflow: auto;
}
</style>
